<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<canvas id="mycanvas" width="400" height="500"></canvas>
</body>
</html>

<style type="text/css">
	#mycanvas{border: 1px solid #000000;}
</style>

<script type="text/javascript">
	var canvas = document.getElementById("mycanvas");
	var context = canvas.getContext("2d");
	context.fillStyle="#eeeeef"
	context.fillRect(0,0,400,400)

	for (var i =0;i<=10;i++) {
		context.beginPath();
		context.fillStyle = "rgba(0,255,0,0.15)";
		context.arc(i*25,i*25,i*10,0,2*Math.PI,true);
		context.closePath();
		context.fill()
	};
</script>